import React, {useEffect, useRef, useState} from 'react'
import {Button, Space, Table} from "antd";
import {ColumnsType} from "antd/es/table";
import ModalCom from "./Model";
import TableSearch from "./TableSearch";
import {ResPage, ResultData} from "../../api/interface";
import {deleteArticle, getArticleList} from "../../api/modules/article";
import {useNavigate} from "react-router-dom";

interface DataType {
    key: string;
    name: string;
    description:string,
    id: number;
}
function Article(){
    const [data, setData] = useState<any>([]);
    const modalRef = useRef<any>(null);
    const [paginationParams, setPaginationParams] = useState<any>({
        pageSize: 10,
        pageNum: 1,
        total: 20,
    });
    const [searchParmas,setSearchParams] = useState({
        name:''
    })

    const navigate =   useNavigate()
    const onSearch = (searchParams: any) => {
        // setPaginationParams({...paginationParams,...searchParams})
        setSearchParams(searchParams);
    };
    const handleExport = async (record:any) => {
        addModal(record)
    };
    const addModal = (flag?: DataType) => {
        if (!flag) {
            modalRef.current!.showModal();
        } else {
            modalRef.current!.showModal(flag);
        }
    };
    const handleDelete = async ({ id }: { id: number }) => {
        const result = await deleteArticle(id);
        if (result) {
            getList();
        }
    };
    const getList = async () => {
        const result = (await getArticleList({
            ...paginationParams,
            ...searchParmas
        })) as ResultData<ResPage<any>>;
        if (result.data?.records) {
            setData(result.data.records);
            paginationParams.total = result.data.total;
        }
    };


    const onChange = async (page: number, pageSize: number) => {
        setPaginationParams({ ...paginationParams, pageNum: page, pageSize });
    };


    const handlepreView = (record:any)=>{
        navigate('/markdown-review?id=' + record.id)
    }
    const columns: ColumnsType<DataType> = [
        {
            title: "文章标题",
            dataIndex: "name",
            key: "name",
            render: (text) => <a>{text}</a>,
        },
        {
            title: "文章内容",
            dataIndex: "content",
            key: "content",
            ellipsis:true,
            render:(text,record)=>{
                return <Button type="link" onClick={()=>handlepreView(record)}>查看文章</Button>
            }
        },
        {
            title: "发布人",
            dataIndex: "user",
            key: "user",
        },
        {
            title: "发布时间",
            dataIndex: "time",
            key: "time",
        },
        {
            title: "Action",
            key: "id",
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={() => handleExport(record)}>编辑</a>
                    <a onClick={() => handleDelete(record)}>删除</a>
                </Space>
            ),
        },
    ];
    useEffect(()=>{
        getList()
    },[paginationParams,searchParmas])

    return (
        <>
            <Space>
                <Button type="primary" onClick={() => addModal()}>
                    新增
                </Button>
                <TableSearch onSearch={onSearch}></TableSearch>
            </Space>
            <Table
                rowKey="id"
                columns={columns}
                dataSource={data}
                pagination={{
                    total: paginationParams.total,
                    pageSize: paginationParams.pageSize,
                    current: paginationParams.pageNum,
                    onChange: onChange,
                    showSizeChanger: true,
                    showTotal: (total) => total,
                }}
            />
            <ModalCom ref={modalRef} getList={getList}></ModalCom>
        </>
    )
}

export default Article;